<template>
  <div class="main" v-title data-title="清洗消毒方案库">
    <home-nav :userData="userinfo"></home-nav>
    <div class="contain">      
        <h2>清洗消毒方案库</h2>
        <div class="box">
          <div v-for="item of dataArr" :key="item.key">
            <h3>{{item.title}}</h3>
            <div class="card-box">
              <div v-if="item.mainEntrance" class="left-box">
                <div class="card" @click="goView(item.mainEntrance.url)" :class="{nopoint: !item.mainEntrance.url}">
                  <div>
                    <i><img :src="require('@/assets/clearSoln/'+item.mainEntrance.icon+'.png')" /></i>
                    <span>{{item.mainEntrance.name}}</span>
                    <a-dropdown v-if="item.mainChild">
                      <a class="ant-dropdown-link" @click.stop="goView">
                        <span>工艺数字化</span>  
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item v-for="child in item.mainChild" :key="child.key" @click="goView(child.url)">
                            <span>{{child.name}}</span>
                          </a-menu-item>                          
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </div>
                </div>
              </div>
              <div class="right-box">
                <div v-for="child of item.children" :key="child.key" class="right">
                  <div class="card" @click="goView(child.url)" :class="{nopoint: !child.url}">
                    <i><img :src="require('@/assets/clearSoln/'+child.icon+'.png')" /></i>
                    <span>{{child.name}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import {filterHasPermission} from '@/utils/hasPermission'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      dataArr: [
        {
          title: '酱油',
          key: '1',
          mainEntrance:{name: '清消方案库', url: '/clearJy/disinfect/list', icon: 'lib', key: '1-0'},
          mainChild: [
            {name: 'xx', url: '/clearJy/finished/list', key: '1-0-1'},
            {name: 'xxx', url: '', key: '1-0-2'},
            {name: 'xxx', url: '', key: '1-0-3'},
          ],
          children: [
            {name: '成品主数据', url: '/clearJy/finished/list', icon: 'pinzhong', key: '1-1'},
            {name: '配料主数据', url: '/clearJy/burden/list', icon: 'peiliao', key: '1-2'},
            {name: '清洗方案数据', url: '/clearJy/clear/list', icon: 'fangan', key: '1-3'},
            {name: '清洗方式', url: '/clearJy/clear/list', icon: 'fangshi', key: '1-4'},
          ]
        },
        {
          title: '蚝油',
          key: '2',
          mainEntrance:{name: '清消方案库', url: '/clearSoln/disinfect/list', icon: 'lib', key: '2-0'},
          children: [
            {name: '成品主数据', url: '/clearSoln/finished/list', icon: 'pinzhong', key: '2-1'},
            {name: '配料主数据', url: '/clearSoln/burden/list', icon: 'peiliao', key: '2-2'},
            {name: '清洗方案数据', url: '/clearSoln/clear/list', icon: 'fangan', key: '2-3'},
            {name: '清洗方式', url: '/clearSoln/method/list', icon: 'fangshi', key: '2-4'},
            {name: '顶料量规则', url: '/clearSoln/topMater/list', icon: 'guize', key: '2-5'},
            {name: '转型时长规则', url: '/clearSoln/rule/list', icon: 'pinzhong', key: '2-6'},
          ]
        },
      ],
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'clearHome',
      },
    }
  },
  mounted() {
    
  },
  methods: {
    goView(url) {
      if(!url){
        this.$message.info('功能正在火热开发中！')
        return
      }
      let permiss = 'hte:wash'
      if(url.indexOf('clearJy')>-1){
        permiss = 'hte:JYwash'
      }
      if(!filterHasPermission(permiss)){
        this.$message.info('您没有权限，请联系管理员！')
        return
      }
      let urlJump = this.$router.resolve({ path: url })
      window.open(urlJump.href, '_blank')
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  position: relative;
  min-height: 100vh;
  background: url('../../../assets/clearSoln/bg.png') no-repeat 30% fixed;
  overflow-y: auto;
  ul {
    list-style: none;
  }
  h2{font-weight: bold;font-size: 48px;color: #035AB4;margin-bottom: 0;}
  .contain{position: absolute;right: 12vw;top: 14vh;text-align: center;width: 773px;}
  .box{
    h3{display: inline-block;font-weight: bold;font-size: 24px;color: #273C67;width: 306px;
    text-align: center;background: #FFFFFF;border-radius: 24px;margin-bottom: 27px;margin-top:25px}
    .card-box{display: flex;flex-wrap: wrap;
      .card{opacity: 0.8;background: #3685D4;border-radius: 8px;width: 239px;font-weight: 700;font-size: 18px;color: #FFFFFF;
        margin-right: 18px;margin-bottom: 16px;padding:8px 20px;display: flex;align-items: center;cursor: pointer;
        i{margin-right: 15px;width:48px;
          img{width: 100%}
        }
        &:hover{opacity: 1;}
        &.nopoint{cursor: not-allowed;
          &:hover{opacity: 0.8;}
        }
      }
      .right-box{display: flex;flex-wrap: wrap;flex: 1;}
      .left-box{position: relative;
        .card{height: calc(100% - 16px);flex-wrap: wrap;justify-content: center;background:#1A60D8;
          i{width:49px;margin-right: 0;margin-bottom: 9px;}
          span{width: 100%;padding-bottom: 37px;}
          >div{display: flex;align-items: center;flex-wrap: wrap;justify-content: center;}
        }
        /deep/ .ant-dropdown-link{position: absolute;
          bottom: 16px;
          background-color: #4a95dc;
          width: calc(100% - 18px);
          padding: 5px;
          color: #fff;
          font-size: 16px;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
}
/deep/ .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{text-align: center;}
@media screen and (max-width: 1500px) {
  .main {
    .contain{width:663px;right: 7vw;}
    .box .card-box .card{
      font-size: 15px;width: 193px;
      i{width: 38px;}
    }    
  }
}
@media screen and (max-width: 1200px) {
  .main{
    .contain{width:535px;right: 7vw;top:16vh;}
    .box .card-box .card{
      font-size: 14px;width: 168px;padding:4px 10px;margin-right: 10px;margin-bottom: 10px;
      i{width: 38px;}
    }
    .box .card-box .left-box .card{height: calc(100% - 10px);
      i{width:36px}
      span{padding-bottom:27px;}
      /deep/ .ant-dropdown-link{bottom: 10px;width: calc(100% - 10px);font-size: 14px;padding: 3px;}
    }
    .box h3{margin-top:17px;margin-bottom: 10px;}        
  }
}
</style>